<%@ page import="com.scau.ums.util.tools.UserInfoTool" %>
<%@ page import="java.util.Map" %>
<%@ page import="java.util.List" %>
<%@ page import="com.scau.ums.util.tools.RepairReportTool" %>
<%@ page import="java.text.SimpleDateFormat" %>
<%@ page import="com.scau.ums.model.*" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="com.scau.ums.util.tools.IpAddress" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%--
  Created by IntelliJ IDEA.
  User: Superior
  Date: 2019/7/29
  Time: 22:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html class="no-js" lang="en">
<script src="js/jquery-3.2.1min.js"></script>
<script src="js/tanchuang.js"></script>
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>用户功能界面</title>
    <meta name="robots" content="noindex, follow"/>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">

    <!-- CSS
	============================================ -->
    <!-- google fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,300i,400,400i,600,700,800,900%7CPoppins:300,400,500,600,700,800,900"
          rel="stylesheet">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrapmin.css">
    <!-- Font-awesome CSS -->
    <link rel="stylesheet" href="css/font-awesomemin.css">
    <!-- Slick slider css -->
    <link rel="stylesheet" href="css/slickmin.css">
    <!-- animate css -->
    <link rel="stylesheet" href="css/animate.css">
    <!-- Nice Select css -->
    <link rel="stylesheet" href="css/nice-select.css">
    <!-- jquery UI css -->
    <link rel="stylesheet" href="css/jqueryuimin.css">
    <!-- main style css -->
    <link rel="stylesheet" href="css/style.css">

    <style type="text/css">


    </style>

    <!--notification样式-->
    <style type="text/css">
        .notification {
            /*width: 360px;*/
            /*height: 110px;*/
            /*z-index: 9000;*/
            /*position: fixed;*/
            /*box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);*/
            /*padding: 20px;*/
            /*margin: 0.5rem 0 1rem 0;*/
            /*border-radius: 2px;*/
            /*background-color: #fff;*/
        }

        .notification .dismiss {
            top: 10px;
            right: 10px;
            width: 20px;
            height: 20px;
            color: #fff;
            text-align: center;
            line-height: 20px;
            overflow: hidden;
            position: absolute;
            background-color: #B8B8B8;
            border-radius: 50%;
        }

        .notification .illustration {
            margin-right: 20px;
            float: left;
        }

        .notification .illustration img {
            border-radius: 50%;
        }

        .notification .text .title {
            font-size: 18px;
            font-weight: bold;
        }
        .operation-botton{
            background-color: #87b106;
            color: #fdfff8;
            padding: 4px 9px;
            font-size: 15px;
            border-radius: 5px;
            cursor: pointer;
        }
        .operation-botton:hover {
            background: #282828;
        }
        .operation-botton-disable{
            background-color: #b6b7ba;
            color: #fdfff8;
            padding: 4px 9px;
            font-size: 15px;
            border-radius: 5px;
        }
        .my-lost-and-found table{
            table-layout: fixed;

        }
        .my-lost-and-found table td{
            overflow:hidden;
            white-space:nowrap;
            text-overflow:ellipsis;
        }
    </style>

    <!--notification.js样式-->
    <script>

        Notification = window.Notification || {};

        Notification = function () {

            'use strict';

            var number = 0;
            var incPosition = 0;

            var template = function (title, text, image, position) {
                incPosition = number * 120;
                number = number + 1;
                var textHtml = '<div class="text">' + text + '</div>';
                var titleHtml = (!title ? '' : '<div class="title">' + title + '</div>');
                var imageHtml = (!image ? '' : '<div class="illustration"><img src="' + image + '" width="70" height="70" /></div>');
                var style;
                switch (parseInt(position, 10)) {
                    case 1:
                        style = "top:" + incPosition + "px; left:20px;";
                        break;
                    case 2:
                        style = "top:" + incPosition + "px; right:20px;";
                        break;
                    case 3:
                        style = "bottom:" + incPosition + "px; right:20px;";
                        break;
                    case 4:
                        style = "bottom:" + incPosition + "px; left:20px;";
                        break;
                    default:
                        ;
                }
                return {
                    id: number,
                    content: '<div style="undefinedposition: ;position: fixed;top: 15px;z-index: 33;width: 360px;height: 85px;background: wheat;box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)" class="notification notification-' + number + ' " style="' + style + '">' +
                        '<div class="dismiss">&#10006;</div>' +
                        imageHtml +
                        '<div class="text">' + titleHtml + textHtml + '</div>' +
                        '</div>'
                };
            };

            var hide = function (id) {
                $(document).find('.notification-' + id).remove();
                number = number - 1;
            };

            var create = function (title, text, image, animation, position, delay) {
                var notification = template(title, text, image, position);
                $(notification.content).addClass('animated ' + animation).appendTo('body');
                if (!delay) {
                    delay = 2;
                }
                setTimeout(function () {
                    hide(notification.id);
                }, 1000 * delay);
            };

            return {
                create: create
            };

        }();

    </script>
    <style type="text/css"></style>
    <%--"我的"按钮判断跳转--%>
    <script>
        function wodeRedirect() {
            var jsUserType = '<%=request.getSession().getAttribute("USER_TYPE")%>';
            if(jsUserType=='<%=User.ADMIN%>')
            {
                window.location.href="/adminEntrance";
            }
            if(jsUserType=='<%=User.MAINTAINER%>')
            {
                window.location.href="/maintainerEntrance";
            }
            if(jsUserType=='<%=User.STUDENT%>'||jsUserType=='<%=User.TEACHER%>')
            {
                window.location.href="/userEntrance";
            }
        }
    </script>
</head>

<body>

<header class="header-area">
    <div class="main-header d-none d-lg-block">
        <!--顶部left开始-->
        <div class="header-top black-bg">
            <div class="container">
                <!--顶部选择-->
                <div class="row align-items-center">
                    <div class="col-lg-6">
                        <div class="top-left-navigation">
                            <ul class="nav align-items-center">
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-6 d-flex justify-content-end">
                        <div class="header-social-link">
                        </div>
                        <ul class="user-info-block">
                            <!--登录开始-->
                            <%if (request.getSession().getAttribute("USER_NAME") == null) {%>
                            <li><a href="/login"><i class="fa fa-sign-in"></i> 登录</a></li>
                            <%} else {%>
                            <ul class="nav">
                                <!--登录开始-->
                                <li class="mini-cart-wrap">
                                    <a href="/userEntrance" class="minicart-btn">
                                        <span class="fa fa-user-circle-o"></span>
                                        <% String username = (String) request.getSession().getAttribute("USER_NAME");
                                            out.print(username);%>
                                        <span id="notification" class="notification" style="top: -5px;
                                                      right: 40px;
                                                      position: absolute;
                                                      width: 18px;
                                                      height: 18px;
                                                      text-align: center;
                                                      line-height: 18px;
                                                      font-size: 10px;
                                                      color: #fff;
                                                      border-radius: 50%;
                                                      background-color: #87b106;"></span>
                                    </a>
                                    <!--websocket实时接收消息-->
                                    <script>
                                        $(function () {
                                            transferCircleNumber();
                                        })
                                        // var noticeSum=0;
                                        // $.ajax({
                                        //   url: "/receiveInfo",
                                        //   async:true,
                                        //   type: "GET",
                                        //   dataType:"json",
                                        //   success: function (res) {  //res是server端响应
                                        //     noticeSum++;
                                        //     console.log(res);
                                        //     if(res==0){
                                        //       document.getElementById("notification").style.display="none";
                                        //     }
                                        //     else{
                                        //       document.getElementById("notification").innerText=noticeSum.toString();
                                        //     }
                                        //   }
                                        // })
                                        // var noticeSum=0;
                                        // if(noticeSum==0){
                                        //   document.getElementById("notification").style.display="none";
                                        // }
                                        // $(function() {
                                        //   var websocket;
                                        //   if('WebSocket' in window) {
                                        //     console.log("此浏览器支持websocket");
                                        //     websocket = new WebSocket("ws://localhost:8080/websocket");
                                        //   } else if('MozWebSocket' in window) {
                                        //     alert("此浏览器只支持MozWebSocket");
                                        //   } else {
                                        //     alert("此浏览器只支持SockJS");
                                        //   }
                                        //   websocket.onopen = function(evnt) {
                                        //     console.log(evnt);
                                        //     $("#tou").html("链接服务器成功!")
                                        //   };
                                        //   websocket.onmessage = function(evnt) {
                                        //     noticeSum++;
                                        //     document.getElementById("notification").style.display="block";
                                        //     document.getElementById("notification").innerText=noticeSum.toString();
                                        //     alert(evnt);
                                        //   };
                                        //   websocket.onerror = function(evnt) {};
                                        //   websocket.onclose = function(evnt) {
                                        //     console.log("与服务器断开了链接!");
                                        //     $("#tou").html("与服务器断开了链接!")
                                        //   }
                                        //
                                        //   $('#close').bind('click', function() {
                                        //     websocket.close();
                                        //   });
                                        //
                                        //   $('#send').bind('click', function() {
                                        //     send();
                                        //   });
                                        //
                                        //   function send() {
                                        //     if(websocket != null) {
                                        //       var message = document.getElementById('message').value;
                                        //       console.log(message);
                                        //       websocket.send("#anyone#"+message);
                                        //     } else {
                                        //       alert('未与服务器链接.');
                                        //     }
                                        //   }
                                        // });



                                        var websocket = null;
                                        //判断当前浏览器是否支持WebSocket
                                        if ('WebSocket' in window) {
                                            websocket = new WebSocket("ws://<%=IpAddress.ipAddress%>:8080/websocket/<%=request.getSession().getAttribute("USER_ID")%>");
                                        }
                                        else {
                                            console.log('当前浏览器不支持 websocket')
                                        }

                                        //连接发生错误的回调方法
                                        websocket.onerror = function () {
                                            console.log("WebSocket连接发生错误");
                                        };


                                        //连接成功建立的回调方法
                                        websocket.onopen = function () {
                                            console.log("WebSocket连接成功"+<%=request.getSession().getAttribute("USER_ID")%>);
                                        }


                                        //接收到消息的回调方法
                                        websocket.onmessage = function (event) {
                                            // console.log(event.data);
                                            $("#flipInX").click();
                                            // alert("管理员给您发送了一条消息："+event.data);
                                            transferCircleNumber();

                                            UserShowInfostill();

                                        }


                                        //连接关闭的回调方法
                                        websocket.onclose = function () {
                                            console.log("WebSocket连接关闭");
                                        }


                                        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
                                        window.onbeforeunload = function () {
                                            closeWebSocket();
                                        }


                                        //关闭WebSocket连接
                                        function closeWebSocket() {
                                            websocket.close();
                                        }

                                    </script>

                                    <!--转换圆心数字-->
                                    <script>
                                        function transferCircleNumber() {
                                            $.ajax({
                                                type: "GET",
                                                url: "countMessage",
                                                dataType: "json",
                                                success: function (data) {
                                                    document.getElementById("notification").style.display = "block";
                                                    document.getElementById("notification2").style.display = "block";
                                                    if (data == 0) {
                                                        document.getElementById("notification").style.display = "none";
                                                        document.getElementById("notification2").style.display = "none";
                                                    }
                                                    document.getElementById("notification").innerText = data;
                                                    document.getElementById("notification2").innerText = data;
                                                    // noticeSum = data;
                                                },
                                                error: function () {
                                                    document.getElementById("notification").style.display = "none";
                                                }
                                            })
                                        }
                                    </script>
                                    <!--两个按钮开始-->
                                    <div class="cart-list-wrapper">
                                        <div class="minicart-button">
                                            <a onclick="wodeRedirect()"><i class="fa fa-user-plus"></i> 我的</a>
                                            <a href="/logout"><i class="fa fa-user-times"></i> 注销</a>
                                            <!--当管理员发消息时，会自动触发此按钮，相应的，会触发对应绑定的click事件，此按钮默认隐藏-->
                                            <button id="flipInX" class="notify btn" value="flipInX" style="display:none">flipInX</button>
                                            <script>
                                                var position=100;
                                                $("#flipInX").click(function (event) {
                                                    Notification.create(
                                                        // Title
                                                        "消息",
                                                        // Text
                                                        "您有一条新的消息",
                                                        // Illustration
                                                        "img/user.jpg",
                                                        // Effect
                                                        $(event.target).text(),
                                                        // Position
                                                        position
                                                    );
                                                });
                                            </script>
                                        </div>
                                    </div>
                                    <!--两个按钮结束-->
                                </li>
                                <!--登录结束-->
                            </ul>
                            <%}%>
                            <!--登录结束-->
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!--顶部left结束-->

        <div class="header-main-area black-soft sticky">
            <div class="container">
                <div class="row align-items-center position-relative">
                    <!-- logo展示开始 -->
                    <div class="col-auto">
                        <div class="logo">
                            <a href="/">
                                <img src="img/2.jpg" style="margin-bottom:58px" alt="Brand Logo">
                            </a>
                        </div>
                    </div>
                    <!-- logo展示结束 -->
                    <div class="col-auto position-static">
                        <div class="main-menu-area">
                            <div class="main-menu">
                                <!-- 标签栏开始 -->
                                <nav class="desktop-menu">
                                    <ul>
                                        <li class="active"><a href="/">主页 <i class="fa fa-angle-left"></i></a>
                                        </li>
                                        <%--                                        <li><a href="#">后勤模块 <i class="fa fa-angle-down"></i></a>--%>
                                        <%--                                            <ul class="dropdown">--%>
                                        <%--                                                <li><a href="/repairreport">报修 <i class="fa fa-plus"></i></a>--%>
                                        <%--                                                </li>--%>
                                        <%--                                                <li><a href="/login">言论管理 <i class="fa fa-twitch"></i></a>--%>
                                        <%--                                                </li>--%>
                                        <%--                                            </ul>--%>
                                        <%--                                        </li>--%>

                                    </ul>
                                </nav>
                                <!-- 标签栏结束 -->
                            </div>
                        </div>
                    </div>


                </div>
            </div>
        </div>


    </div>


</header>

<main>
    <!-- 导航图片开始 -->
    <div class="breadcrumb-area breadcrumb-img bg-img" data-bg="img/6.jpg">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="breadcrumb-wrap">
                        <nav aria-label="breadcrumb">
                            <h3 class="breadcrumb-title">高校后勤综合信息管理平台</h3>
                            <ul class="breadcrumb justify-content-center">
                                <li class="breadcrumb-item"><a href="/"><i class="fa fa-home"></i></a></li>
                                <li class="breadcrumb-item"><a href="/userEntrance">用户功能界面</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 导航图片结束 -->

    <!-- 用户信息以及功能展示开始 -->
    <div class="my-account-wrapper section-padding">
        <div class="container">
            <div class="section-bg-color">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="myaccount-page-wrapper">
                            <div class="row">
                                <!--五个侧栏标签页开始-->
                                <div class="col-lg-3 col-md-4">
                                    <div class="myaccount-tab-menu nav" role="tablist">
                                        <a id="btn3" href="#userInfo" class="active" data-toggle="tab"><i
                                                class="fa fa-address-book-o "></i>
                                            个人信息</a>
                                        <a id="btn4" href="#myApply" data-toggle="tab"><i class="fa fa-comments-o"></i>
                                            我的申请</a>
                                        <a id="btn7" href="#mySuggestion" data-toggle="tab"><i
                                                class="fa fa-pencil-square-o"></i>
                                            我的建议</a>
                                        <a id="btn5" href="#download" data-toggle="tab"><i
                                                class="fa fa-file-audio-o "></i>
                                            公告信息<span id="notification2" class="notification2" style="
                                                      right:156px;
                                                      top:153px;
                                                      position: absolute;
                                                      width: 18px;
                                                      height: 18px;
                                                      text-align: center;
                                                      line-height: 18px;
                                                      font-size: 10px;
                                                      color: #fff;
                                                      border-radius: 50%;
                                                      background-color: #87b106;"></span></a>
                                        <a id="btn8" href="#myLostAndFound" data-toggle="tab"><i
                                                class="fa fa-pencil-square-o"></i>
                                            失物招领</a>
                                        <a id="btn6" href="#logout" data-toggle="tab"><i class="fa fa-sign-out"></i>
                                            注销登录</a>
                                    </div>
                                </div>
                                <!--五个侧栏标签页结束-->
                                <script>
                                    //当页面打开时，用户通知栏有小圆点提示有多少条未读消息
                                    function messageAmount() {

                                        $.ajax({
                                            type: "GET",
                                            url: "countMessage",
                                            dataType: "json",
                                            success: function (data) {
                                                document.getElementById("notification2").style.display = "block";
                                                document.getElementById("notification").style.display = "block";
                                                if (data == 0) {
                                                    document.getElementById("notification2").style.display = "none";
                                                    document.getElementById("notification").style.display = "none";
                                                }
                                                document.getElementById("notification2").innerText = data;
                                                document.getElementById("notification").innerText = data;
                                                // noticeSum=data;
                                            },
                                            error: function () {
                                                document.getElementById("notification").style.display = "none";
                                            }
                                        })
                                    }

                                    $(document).ready(
                                        messageAmount()
                                    )
                                </script>
                                <div class="col-lg-9 col-md-8">
                                    <div class="tab-content" id="myaccountContent">
                                        <!-- 个人信息开始 -->
                                        <div class="tab-pane fade show active" id="userInfo" role="tabpanel">
                                            <div class="myaccount-content">
                                                <h5>用户信息<a class="btn btn-sqr" style="margin-left:600px;margin-top:-23px" href="/changePassword">修改密码</a></h5>
                                                <%
                                                    User user = (User) request.getAttribute("user");
                                                    int type = (Integer) session.getAttribute("USER_TYPE");

                                                    Map<String, String> map = UserInfoTool.getUserInfo(user, type);

                                                %>
                                                <div class="myaccount-table table-responsive text-center">
                                                    <table class="table table-bordered">
                                                        <%
                                                            for (Map.Entry<String, String> entry : map.entrySet()) {
                                                        %>
                                                        <thead class="thead-light">
                                                        <tr>
                                                            <th><%=entry.getKey()%>
                                                            </th>
                                                        </tr>
                                                        </thead>
                                                        <tbody>
                                                        <tr>
                                                            <td><%=entry.getValue()%>
                                                            </td>
                                                        </tr>
                                                        </tbody>
                                                        <%
                                                            }
                                                        %>

                                                    </table>

                                                </div>

                                            </div>
                                        </div>
                                        <!-- 个人信息结束 -->

                                        <!-- 我的申请开始 -->
                                        <div class="tab-pane fade" id="myApply" role="tabpanel">
                                            <div class="myaccount-content">
                                                <h5>我的申请</h5>
                                                <div class="myaccount-table table-responsive text-center">
                                                    <div class="myaccount-tab-menu nav" role="tablist"
                                                         style="-webkit-flex-direction:row">
                                                        <a id="btn1" href="#myInputApply" data-toggle="tab"
                                                           style="width:180px;text-align:left;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(229, 229, 229)"><i
                                                                class="fa fa-comments-o"></i>
                                                            我提交的申请</a>
                                                        <a id="btn2" href="#evaluate" data-toggle="tab"
                                                           style="width:180px;text-align:left;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(229, 229, 229)"><i
                                                                class="fa fa-file-audio-o "></i>
                                                            待评价</a>
                                                        <a id="btnHistory" href="#historyApply" data-toggle="tab"
                                                           style="width:180px;text-align:left;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(229, 229, 229)"><i
                                                                class="fa fa-history "></i>
                                                            历史记录</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- 我的申请结束 -->

                                        <!--我的建议开始-->
                                        <div class="tab-pane fade" id="mySuggestion" role="tabpanel">
                                            <div class="myaccount-content">
                                                <h5>我的建议</h5>
                                                <div class="myaccount-table table-responsive text-center">
                                                    <%
                                                        List<Suggestion> suggestionList = (List<Suggestion>) request.getAttribute("suggestionList");
                                                        if (suggestionList.size() == 0) {
                                                    %>
                                                    <img src="img/8.jpg">
                                                    <h5>目前还没有数据哟~</h5>
                                                    <%
                                                    } else {
                                                    %>
                                                    <table class="table table-bordered">
                                                        <thead class="thead-light">
                                                        <tr>
                                                            <th>状态</th>
                                                            <th>编号</th>
                                                            <th>建议内容</th>
                                                            <th>提交时间</th>
                                                        </tr>
                                                        </thead>
                                                        <%
                                                            SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy年MM月dd日HH时mm分ss秒");
                                                            for (int i = 0; i < suggestionList.size(); i++) {
                                                        %>
                                                        <tbody>
                                                        <tr>
                                                            <td style="color: red"><%=suggestionList.get(i).getState()%>
                                                            </td>
                                                            <td><%=suggestionList.get(i).getId()%>
                                                            </td>
                                                            <td><%=suggestionList.get(i).getContent()%>
                                                            </td>
                                                            <td><%=dateFormat.format(suggestionList.get(i).getDate())%>
                                                            </td>
                                                        </tr>
                                                        </tbody>
                                                        <%
                                                                }
                                                            }
                                                        %>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                        <!--我的建议结束-->

                                        <!-- 公告信息开始 -->
                                        <div class="tab-pane fade" id="download" role="tabpanel">
                                            <div class="myaccount-content">
                                                <h5>公告信息<span style="margin-left: 594px;font-size: 10px;color: red;">(点击通知标题显示通知内容!)</span>
                                                </h5>
                                                <div class="myaccount-table table-responsive text-center"
                                                     style="overflow:hidden;overflow-y:hidden">
                                                    <!--公告栏开始-->
                                                    <div class="section-padding" style="margin-top: -79px">
                                                        <div class="container">
                                                            <div class="row">
                                                                <div class="col-12" style="height: auto;">
                                                                    <div class="checkoutaccordion"
                                                                         id="checkOutAccordion">
                                                                        <ul id="Notice2">

                                                                                <script>
                                                                                    $(document).ready(function(){
                                                                                        UserShowInfostill();
                                                                                    });
                                                                                </script>




<%--                                                                            <%--%>
<%--                                                                                List<Info> infoList = (List<Info>) request.getAttribute("infoList");--%>
<%--                                                                                //InfoImp infoImp--%>

<%--                                                                                for (int i = 0; i < infoList.size(); i++) {--%>
<%--                                                                            %>--%>
<%--                                                                            <div class="card">--%>
<%--                                                                                <h6 id="Notice"--%>
<%--                                                                                    style="text-align: left">--%>
<%--                                                                                    <button onclick="transferColor(this)"--%>
<%--                                                                                            name="<%=infoList.get(i).getId()%>"--%>
<%--                                                                                            data-toggle="collapse"--%>
<%--                                                                                            data-target="#i<%=i%>">--%>
<%--                                                                                        <%=infoList.get(i).getTitle()%>--%>
<%--                                                                                    </button>--%>
<%--                                                                                    <%if (infoList.get(i).getState().equals("unchecked")) {%>--%>
<%--                                                                                    <span id="NoticeUncheckedStyle<%=infoList.get(i).getId()%>"--%>
<%--                                                                                          style="color: red">(未读)</span>--%>
<%--                                                                                    <%--%>
<%--                                                                                        //                                                                                   infoList.get(i).setStatus("checked");--%>

<%--                                                                                    } else {--%>
<%--                                                                                    %>--%>
<%--                                                                                    <span id="NoticeUncheckedStyle<%=infoList.get(i).getId()%>"--%>
<%--                                                                                          style="color: wheat">(已读)</span>--%>
<%--                                                                                    &lt;%&ndash;                                                                                    <script>&ndash;%&gt;--%>
<%--                                                                                    &lt;%&ndash;                                                                                        document.getElementById("NoticeUncheckedStyle").style.display="none";&ndash;%&gt;--%>
<%--                                                                                    &lt;%&ndash;                                                                                    </script>&ndash;%&gt;--%>
<%--                                                                                    <%}%>--%>
<%--                                                                                </h6>--%>
<%--                                                                                <div id="i<%=i%>" class="collapse"--%>
<%--                                                                                     data-parent="#checkoutaccordion">--%>
<%--                                                                                    <div class="card-body">--%>
<%--                                                                                        <%=infoList.get(i).getContent()%>--%>
<%--                                                                                    </div>--%>
<%--                                                                                </div>--%>
<%--                                                                            </div>--%>
<%--                                                                            <%--%>
<%--                                                                                }--%>
<%--                                                                            %>--%>
                                                                            <!--公告栏中的未读和已读变化的ajax-->
                                                                            <script>

                                                                                //公告栏中的未读和已读变化的ajax
                                                                                function transferColor(element) {
                                                                                    var spanId = "NoticeUncheckedStyle";
                                                                                    spanId += element.name;
                                                                                    // var state=document.getElementById(spanId).innerText;
                                                                                    var infoId = element.name;
                                                                                    $.ajax({
                                                                                        type: "post",
                                                                                        url: "/transferState?infoId=" + infoId,
                                                                                        // data:{clickNum:clickNum},
                                                                                        dataType: "json",
                                                                                        success: function (data) {
                                                                                            // alert(spanId);
                                                                                            document.getElementById(spanId).innerText = "(已读)";
                                                                                            document.getElementById(spanId).style.color = "wheat";

                                                                                            //当点击某条消息时，左边的小圆点自动改变未读消息的数值！
                                                                                            messageAmount()
                                                                                        },
                                                                                        error: function (data) {
                                                                                            alert("failed");

                                                                                        }
                                                                                    })


                                                                                }

                                                                            </script>
                                                                        </ul>
                                                                        <button id="page"
                                                                                style="color:white;opacity:0.5"
                                                                                class="btn btn-sqr">加载更多<span
                                                                                class="fa fa-hand-o-down"
                                                                                style="margin-left:10px"></span>
                                                                        </button>
                                                                        <button id="info"
                                                                                style="color:white;display: none"
                                                                                class="btn btn-sqr">没有更多数据了<span
                                                                                class="fa fa-chain-broken"
                                                                                style="margin-left: 10px"></span>
                                                                        </button>

                                                                        <div class="paginatoin-area text-center"
                                                                             style="border:none">
                                                                            <!--<ul class="pagination-box">
                                                                                当前页为第一页时href="javascript:void(0)" 禁用 a 标签的点击时间事件 
                                                                                  当前页不是第一页时请求url 中返回currentPage=pageInfo.pageNum - 1  当前页 -1-->
                                                                            <!--<li><a
                                                                                        <c:if test="${pageInfo.pageNum != pageInfo.firstPage}">
                                                                                        href="userEntrance?currentPage=${pageInfo.pageNum - 1 }"</c:if>
                                                                                   <c:if test="${pageInfo.pageNum == pageInfo.firstPage}">
                                                                                        href="javascript:void(0)" class="disabled"</c:if> 
                                                                                        class="previous"
                                                                                ><i class="fa fa-angle-left"></i></a></li>

<%--                                                                                <li class="active"><a href="#">1</a></li>--%>
<%--                                                                                <li><a href="#">2</a></li>--%>
<%--                                                                                <li><a href="#">3</a></li>--%>

                                                                                     foreach 从 1 开始 到 总页数结束  遍历输出 -->
                                                                            <!-- <c:forEach begin="1" end="${pageInfo.pages }" varStatus="status">
                                                                                        <li><a href="userEntrance?currentPage=${status.count }"
                                                                                           <c:if test="${status.count == pageInfo.pageNum}">class="select"</c:if>
                                                                                        >${status.count }</a></li>
                                                                                    </c:forEach>

<%--                                                                                <a class="next" href="#"></a></li>--%>
                                                                                <li><a <c:if test="${pageInfo.pageNum == pageInfo.lastPage}">
                                                                                    class="disabled" href="javascript:void(0)"</c:if>
                                                                                   <c:if test="${pageInfo.pageNum != pageInfo.lastPage}">
                                                                                       href="userEntrance?currentPage=${pageInfo.pageNum + 1 }"</c:if> 
                                                                                        class="next"><i class="fa fa-angle-right"></i></a></li>


                                                                            </ul>-->


                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                        </div>
                                                    </div>
                                                    <!--公告栏结束-->
                                                </div>
                                            </div>
                                        </div>
                                        <!-- 公告信息结束 -->

                                        <!--我的失物招领开始-->
                                        <div class="tab-pane fade" id="myLostAndFound" role="tabpanel" >
                                            <div class="myaccount-content">
                                                <h5>我的失物招领</h5>
                                                <div class="myaccount-table table-responsive text-center my-lost-and-found" style="width: 900px;height: 400px;overflow:auto">
                                                    <%
                                                        List<Lostandfoundinfo> lostandfoundinfoList = (List<Lostandfoundinfo>) request.getAttribute("lostandfoundinfoList");
                                                        if (lostandfoundinfoList.size() == 0) {
                                                    %>
                                                    <img src="img/8.jpg">
                                                    <h5>目前还没有数据哟~</h5>
                                                    <%
                                                    } else {
                                                    %>
                                                    <table class="table table-bordered">
                                                        <thead class="thead-light">
                                                        <tr>
                                                            <th style="width: 120px">物品名称</th>
                                                            <th style="width: 300px">物品丢失描述</th>
                                                            <th style="width: 180px">发布时间</th>
                                                            <th style="width: 100px">状态</th>
                                                            <th style="width: 100px" colspan="2">是否找到</th>
                                                        </tr>
                                                        </thead>
                                                        <%
                                                            SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy年MM月dd日HH时mm分ss秒");
                                                            for (int i = 0; i < lostandfoundinfoList.size(); i++) {
                                                        %>
                                                        <tbody>
                                                        <tr>
                                                            <td title="<%=lostandfoundinfoList.get(i).getItemname()%>"><%=lostandfoundinfoList.get(i).getItemname()%>
                                                            </td>
                                                            <td title="<%=lostandfoundinfoList.get(i).getItemdesc()%>"><%=lostandfoundinfoList.get(i).getItemdesc()%>
                                                            </td>
                                                            <td title="<%=dateFormat.format(lostandfoundinfoList.get(i).getPublishdate())%>"><%=dateFormat.format(lostandfoundinfoList.get(i).getPublishdate())%>
                                                            </td>
                                                            <%
                                                                if(lostandfoundinfoList.get(i).getState().equals("审核通过")){
                                                            %>
                                                            <td style="color: green;" title="<%=lostandfoundinfoList.get(i).getState()%>，可在失物招领大厅查看"><%=lostandfoundinfoList.get(i).getState()%>
                                                            </td>
                                                            <%
                                                            }
                                                            else if(lostandfoundinfoList.get(i).getState().equals("审核不通过")){
                                                            %>
                                                            <td style="color: red;" title="<%=lostandfoundinfoList.get(i).getState()%>，请检查内容是否合法"><%=lostandfoundinfoList.get(i).getState()%>
                                                            </td>
                                                            <%
                                                            }
                                                            else{
                                                            %>
                                                            <td style="color: grey;" title="<%=lostandfoundinfoList.get(i).getState()%>，等待管理员审核中..."><%=lostandfoundinfoList.get(i).getState()%>
                                                            </td>
                                                            <%
                                                                }
                                                                if(lostandfoundinfoList.get(i).getState().equals("审核中") || lostandfoundinfoList.get(i).getState().equals("审核不通过"))
                                                                {
                                                            %>
                                                            <td title="暂不可操作"><button class="operation-botton-disable" disabled style="cursor: not-allowed;pointer-events:none">是</button>
                                                            </td>
                                                            <td title="暂不可操作"><button class="operation-botton-disable" disabled style="cursor: not-allowed;pointer-events:none">否</button>
                                                            </td>
                                                            <%
                                                            }else{
                                                            %>
                                                            <%
                                                                if(lostandfoundinfoList.get(i).getIsfounded().equals("是")){
                                                            %>
                                                            <td title="暂不可操作"><button class="operation-botton-disable" disabled style="cursor: not-allowed;pointer-events:none">是</button>
                                                            </td>
                                                            <td title="点击让大家帮你找"><button class="operation-botton" onclick="setFounded(<%=String.valueOf(lostandfoundinfoList.get(i).getId())%>,'否')">否</button>
                                                            </td>
                                                            <%  }
                                                                else{
                                                            %>
                                                            <td title="点击确认我已找到"><button class="operation-botton" onclick="setFounded(<%=String.valueOf(lostandfoundinfoList.get(i).getId())%>,'是')">是</button>
                                                            </td>
                                                            <td title="暂不可操作"><button class="operation-botton-disable" disabled style="cursor: not-allowed;pointer-events:none">否</button>
                                                            </td>
                                                            <%
                                                                    }
                                                                }
                                                            %>
                                                        </tr>
                                                        </tbody>
                                                        <%
                                                                }
                                                            }
                                                        %>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                        <script>
                                            function setFounded(id,idFounded) {
                                                $.ajax({
                                                    type: "GET",
                                                    url: "setFounded?lostAndFoundId=" + id + "&idFounded=" + idFounded,
                                                    success: function (data) {
                                                        alert("设置成功");
                                                        location.reload();
                                                    },
                                                    error: function () {
                                                        alert("设置失败");
                                                    }
                                                })
                                            }
                                        </script>
                                        <!--我的失物招领结束-->

                                        <!-- 注销登录开始 -->
                                        <div class="tab-pane fade" id="logout" role="tabpanel">
                                            <div class="myaccount-content">
                                                <h5>您确定要注销登录么？</h5>
                                                <a href="/logout" class="btn btn-sqr">确定</a>
                                            </div>
                                        </div>
                                        <!-- 注销登录结束 -->


                                    </div>
                                </div>


                                <!--我的申请两个部分开始-->
                                <div class="col-lg-9 col-md-8"
                                     style="/* width: 156px; */margin-left: 299px;border-bottom: none;/* background: green; *//* float: right; */margin-top: -103px;">
                                    <div class="tab-content">

                                        <!--我提交的申请开始 -->
                                        <div class="tab-pane fade" id="myInputApply" role="tabpane1">
                                            <div class="myaccount-content">

                                                <div class="myaccount-table table-responsive text-center">
                                                    <%
                                                        List<Repairreport> repairreports = (List<Repairreport>) request.getAttribute("repairreports");
                                                        if (repairreports.size() == 0) {
                                                    %>
                                                    <img src="img/8.jpg">
                                                    <h5>目前还没有数据哟~</h5>
                                                    <%
                                                    } else {
                                                    %>
                                                    <table class="table table-bordered">
                                                        <thead class="thead-light">
                                                        <tr>
                                                            <th>状态</th>
                                                            <th>编号</th>
                                                            <th>类型</th>
                                                            <th>提交时间</th>
                                                        </tr>
                                                        </thead>
                                                        <%
                                                            SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy年MM月dd日HH时mm分ss秒");
                                                            for (int i = 0; i < repairreports.size(); i++) {
                                                        %>
                                                        <tbody>
                                                        <tr>
                                                            <td style="color: red"><%=RepairReportTool.returnRepairState(repairreports.get(i).getState())%>
                                                            </td>
                                                            <td><%=repairreports.get(i).getId()%>
                                                            </td>
                                                            <td><%=RepairReportTool.returnRepairType(repairreports.get(i).getType())%>
                                                            </td>
                                                            <td><%=dateFormat.format(repairreports.get(i).getDate())%>
                                                            </td>
                                                        </tr>
                                                        </tbody>
                                                        <%
                                                                }
                                                            }
                                                        %>
                                                    </table>
                                                </div>

                                            </div>
                                        </div>
                                        <!--我提交的申请结束-->

                                        <!--待评价开始 -->
                                        <div class="tab-pane fade" id="evaluate" role="tabpane1">
                                            <div class="myaccount-content">
                                                <h5>未评价的报修单<span style="margin-left: 480px;font-size: 10px;color: red;">(仅显示最近10条未评价的报修单)</span>
                                                </h5>

                                                <div class="myaccount-table table-responsive text-center">
                                                    <%
                                                        List<Repairreport> unAssessRepairreports = (List<Repairreport>) request.getAttribute("unAssessRepairreport");
                                                        if (unAssessRepairreports.size() == 0) {
                                                    %>
                                                    <img src="img/8.jpg">
                                                    <h5>目前还没有数据哟~</h5>
                                                    <%
                                                    } else {
                                                    %>
                                                    <table class="table table-bordered">
                                                        <thead class="thead-light">
                                                        <tr>
                                                            <th>状态</th>
                                                            <th>编号</th>
                                                            <th>类型</th>
                                                            <th>提交时间</th>
                                                            <th></th>
                                                        </tr>
                                                        </thead>
                                                        <%
                                                            SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy年MM月dd日HH时mm分ss秒");
                                                            for (int i = 0; i < unAssessRepairreports.size(); i++) {
                                                        %>
                                                        <tbody>
                                                        <tr>
                                                            <td id="td<%=unAssessRepairreports.get(i).getId()%>"
                                                                style="color: red"><%=RepairReportTool.returnRepairState(unAssessRepairreports.get(i).getState())%>
                                                            </td>
                                                            <td><%=unAssessRepairreports.get(i).getId()%>
                                                            </td>
                                                            <td><%=RepairReportTool.returnRepairType(unAssessRepairreports.get(i).getType())%>
                                                            </td>
                                                            <td><%=dateFormat.format(unAssessRepairreports.get(i).getDate())%>
                                                            </td>
                                                            <td>
                                                                <button id="btn<%=unAssessRepairreports.get(i).getId()%>"
                                                                        name="<%=unAssessRepairreports.get(i).getId()%>"
                                                                        onclick="getID(this)"
                                                                        class="btn btn-sqr search-trigger">评价
                                                                </button>
                                                            </td>
                                                        </tr>
                                                        </tbody>
                                                        <%
                                                                }
                                                            }
                                                        %>
                                                    </table>
                                                </div>

                                                <!--评价保修单表单提交开始-->
                                                <div class="offcanvas-search-wrapper" id="evaluateRep">
                                                    <div class="offcanvas-search-inner">
                                                        <div class="offcanvas-close">
                                                            <i class="fa fa-close"></i>
                                                        </div>
                                                        <div class="container">
                                                            <div class="offcanvas-search-box">
                                                                <form class="d-flex w-100"
                                                                      action="/evaluateRepairreport" method="post">
                                                                    <h4 style="color:wheat;position: absolute;margin-left: 526px;margin-top: -100px">
                                                                        报修评价单</h4>
                                                                    <hr style="color:wheat;margin-top: -64px;border: 1px solid wheat;width: 267px;background: wheat;margin-left: 442px;">
                                                                    <h6 style="
                                                                        color: wheat;
                                                                        width: 360px;
                                                                        position: absolute;
                                                                        margin-top: -27px;
                                                                        margin-left: 252px;
                                                                    ">您所评价的订单编号为<span id="valueOfreportId"></span>
                                                                        <script>
                                                                            var repairState = "td";
                                                                            var buttonDisable = "btn";

                                                                            function getID(element) {
                                                                                document.getElementById("valueOfreportId").innerText = element.name;
                                                                                repairState += element.name;
                                                                                buttonDisable += element.name;
                                                                                document.getElementById("remark").value = "";
                                                                                $("#evaluateRep").css("display", "block");
                                                                            }</script>
                                                                        ,您对此次报修满意么？
                                                                    </h6>
                                                                    <input name="choice1" type="radio" value="满意"
                                                                           style="position:absolute;margin-left: 596px;margin-top: -24px;width: 15px;"
                                                                           checked="true"/>
                                                                    <h6 style="color:wheat;position: absolute;margin-left: 611px;margin-top: -27px;">
                                                                        满意</h6>
                                                                    <input name="choice1" type="radio" value="不满意"
                                                                           style="position:absolute;margin-left: 658px;margin-top: -24px;width: 15px;"/>
                                                                    <h6 style="color:wheat;position: absolute;margin-left: 675px;margin-top: -27px;">
                                                                        不满意</h6>
                                                                    <input id="reportId" name="reportId" type="hidden"/>
                                                                    <script>

                                                                        function transferValue() {
                                                                            $("#reportId").val(document.getElementById("valueOfreportId").innerText);
                                                                            alert("提交成功");
                                                                            $("#evaluateRep").css("display", "none");
                                                                            // alert(repairState+" "+buttonDisable);
                                                                            document.getElementById(repairState).innerText = "已评价";
                                                                            //评价完后按钮失效.
                                                                            document.getElementById(buttonDisable).setAttribute("disabled", "true");
                                                                            $("#"+buttonDisable+"").css({"disabled":"true"});
                                                                            $("#"+buttonDisable+"").css({"disabled":"disabled"});
                                                                            document.getElementById(buttonDisable).innerText = "已评价";
                                                                        }
                                                                    </script>

                                                                    <input type="text" id="remark" name="remark"
                                                                           placeholder="请填写您的评价..." style="
                                                                position: absolute;
                                                                margin-left: 434px;
                                                                margin-top: 14px;
                                                                border-bottom: 2px solid wheat;
                                                                width: 287px;
                                                                height: 33px;
                                                                color:wheat;
                                                            " autocomplete="off">
                                                                    <button style="position: absolute;margin-left: 549px;margin-top: 70px;"
                                                                            type="submit" class="search-btn"
                                                                            onclick="transferValue()"><i
                                                                            class="fa fa-check-square-o"></i>提交
                                                                    </button>
                                                                </form>


                                                                <script>
                                                                    // 点击提交按钮，ajax发送；验证成功，通过location.href = url来跳转
                                                                    $('form').submit(function (e) {
                                                                            e.preventDefault();  //阻止默认提交
                                                                            var evaluation = $("[name='choice1']").val(); // 注意，jquery筛选一定加引号，否则报错uncaught
                                                                            var remark = $("[name='remark']").val();
                                                                            var reportId = $("[name='reportId']").val();
                                                                            $.ajax({
                                                                                url: "/evaluateRepairreport",
                                                                                type: "POST",
                                                                                data: {
                                                                                    "evaluation": evaluation,
                                                                                    "remark": remark,
                                                                                    "reportId": reportId
                                                                                },
                                                                                success: function (res) {  //res是server端响应

                                                                                    <%--                                                                        <%--%>
                                                                                    <%--                                                                            System.out.println("success,return,第二次");--%>
                                                                                    <%--                                                                        %>--%>
                                                                                }
                                                                            })
                                                                        }
                                                                    )
                                                                </script>

                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!--评价保修单表单提交结束-->

                                            </div>
                                        </div>
                                        <!--待评价结束-->

                                        <!--报修历史记录开始 -->
                                        <div class="tab-pane fade" id="historyApply" role="tabpane1">
                                                <div class="myaccount-content">
                                                    <h5>报修历史记录</h5>

                                                    <div class="myaccount-table table-responsive text-center">

                                                        <table id="historyRecord" class="table table-bordered">
                                                            <thead class="thead-light">
                                                            <tr>
                                                                <th>状态</th>
                                                                <th>编号</th>
                                                                <th>类型</th>
                                                                <th>提交时间</th>
                                                                <th></th>
                                                            </tr>
                                                            </thead>


                                                        </table>
                                                    </div>
                                                </div>


                                             <script>

                                                 function getOwnID(element) {
                                                     // var deleteOne=confirm("你确定要删除此条历史记录么？");
                                                     var deletedId=element.name;
                                                     myConfirm('提示','你要删除的报修单ID为：'+deletedId,function(r) {
                                                         if (r) {
                                                             $(function () {

                                                                 $.ajax({
                                                                     type: "post",
                                                                     url: "/delHistory?deletedId=" + deletedId,
                                                                     // data:{clickNum:clickNum},
                                                                     dataType: "json",

                                                                     success: function (data) {
                                                                         $.ajax({
                                                                             type: "post",
                                                                             url: "/history?clickNum1=1",
                                                                             // data:{clickNum:clickNum},
                                                                             dataType: "json",

                                                                             success: function (data) {
                                                                                 $("#historyRecord").empty();
                                                                                 var history = "";
                                                                                 for (var p in data) {
                                                                                     var state;
                                                                                     switch (data[p].state) {
                                                                                         case 1:state="申报";break;
                                                                                         case 2:state="审核通过";break;
                                                                                         case 3:state="已派工";break;
                                                                                         case 4:state="施工中";break;
                                                                                         case 5:state="完工";break;
                                                                                         case 6:state="待评价";break;
                                                                                         case 7:state="结束";break;
                                                                                         case 8:state="审核不通过";break;
                                                                                         default:state="error";
                                                                                     }
                                                                                     var id = data[p].id;
                                                                                     var type;
                                                                                     switch (data[p].type) {
                                                                                         case 1:type="供电";break;
                                                                                         case 2:type="供水";break;
                                                                                         case 3:type="修建";break;
                                                                                         case 4:type="网络";break;
                                                                                         default:type="error";
                                                                                     }
                                                                                     var date =new Date(data[p].date).format("yyyy-MM-dd hh:mm:ss");

                                                                                     history ="<tbody>\n" +
                                                                                         " <tr>\n" +
                                                                                         "     <td style=\"color: red\">"+state+"\n" +
                                                                                         "     </td>\n" +
                                                                                         "     <td>"+id+"\n" +
                                                                                         "     </td>\n" +
                                                                                         "     <td>"+type+"\n" +
                                                                                         "     </td>\n" +
                                                                                         "     <td>"+date+"\n" +
                                                                                         "     </td>\n" +
                                                                                         "<td>\n" +
                                                                                         "    <button id=\"btn"+id+"\"\n" +
                                                                                         "            name=\""+id+"\"\n" +
                                                                                         "            onclick=\"getOwnID(this)\"\n" +
                                                                                         "            class=\"btn btn-sqr search-trigger\">删除\n" +
                                                                                         "    </button>\n" +
                                                                                         "</td>\n"+
                                                                                         " </tr>\n" +
                                                                                         " </tbody>";

                                                                                     //添加到ul中
                                                                                     $("#historyRecord").append(history);
                                                                                 }
                                                                             },
                                                                             error: function () {
                                                                                 alert("failed");
                                                                             }
                                                                         })
                                                                     },
                                                                     error: function () {
                                                                         alert("failed");
                                                                     }
                                                                 })
                                                             });
                                                         }
                                                     })
                                                 }


                                                 //时间格式化设置
                                                 Date.prototype.format = function(fmt) {
                                                     var o = {
                                                         "M+" : this.getMonth()+1,                 //月份
                                                         "d+" : this.getDate(),                    //日
                                                         "h+" : this.getHours(),                   //小时
                                                         "m+" : this.getMinutes(),                 //分
                                                         "s+" : this.getSeconds(),                 //秒
                                                         "q+" : Math.floor((this.getMonth()+3)/3), //季度
                                                         "S"  : this.getMilliseconds()             //毫秒
                                                     };
                                                     if(/(y+)/.test(fmt)) {
                                                         fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
                                                     }
                                                     for(var k in o) {
                                                         if(new RegExp("("+ k +")").test(fmt)){
                                                             fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
                                                         }
                                                     }
                                                     return fmt;
                                                 }

                                                 var clickNum1 = 0;
                                                $(function(){
                                                    clickNum1++;
                                                    $.ajax({
                                                        type: "post",
                                                        url: "/history?clickNum1="+clickNum1,
                                                        // data:{clickNum:clickNum},
                                                        dataType: "json",

                                                        success: function (data) {
                                                            var history = "";
                                                            for (var p in data) {
                                                                var state;
                                                                switch (data[p].state) {
                                                                    case 1:state="申报";break;
                                                                    case 2:state="审核通过";break;
                                                                    case 3:state="已派工";break;
                                                                    case 4:state="施工中";break;
                                                                    case 5:state="完工";break;
                                                                    case 6:state="待评价";break;
                                                                    case 7:state="结束";break;
                                                                    case 8:state="审核不通过";break;
                                                                    default:state="error";
                                                                }
                                                                var id = data[p].id;
                                                                var type;
                                                                switch (data[p].type) {
                                                                    case 1:type="供电";break;
                                                                    case 2:type="供水";break;
                                                                    case 3:type="修建";break;
                                                                    case 4:type="网络";break;
                                                                    default:type="error";
                                                                }
                                                                var date =new Date(data[p].date).format("yyyy-MM-dd hh:mm:ss");

                                                                history ="<tbody>\n" +
                                                                    " <tr>\n" +
                                                                    "     <td style=\"color: red\">"+state+"\n" +
                                                                    "     </td>\n" +
                                                                    "     <td>"+id+"\n" +
                                                                    "     </td>\n" +
                                                                    "     <td>"+type+"\n" +
                                                                    "     </td>\n" +
                                                                    "     <td>"+date+"\n" +
                                                                    "     </td>\n" +
                                                                    "<td>\n" +
                                                                    "    <button id=\"btn"+id+"\"\n" +
                                                                    "            name=\""+id+"\"\n" +
                                                                    "            onclick=\"getOwnID(this)\"\n" +
                                                                    "            class=\"btn btn-sqr search-trigger\">删除\n" +
                                                                    "    </button>\n" +
                                                                    "</td>\n"+
                                                                    " </tr>\n" +
                                                                    " </tbody>";

                                                                //添加到ul中
                                                                $("#historyRecord").append(history);
                                                            }
                                                        },
                                                        error: function () {
                                                            alert("failed");
                                                        }
                                                    })
                                                });
                                            </script>
                                        </div>
                                        <!--报修历史记录结束 -->
                                    </div>
                                </div>
                                <!--我的申请两个部分结束-->

                                <script>
                                    function my(id) {
                                        return document.getElementById(id);
                                    }

                                    my("btn1").onclick = function () {
                                        my("myInputApply").style.display = "block";
                                        my("evaluate").style.display = "none";

                                        my("historyApply").style.display = "none";
                                    }
                                    my("btn2").onclick = function () {
                                        my("evaluate").style.display = "block";
                                        my("myInputApply").style.display = "none";
                                        my("historyApply").style.display = "none";
                                    }
                                    my("btn3").onclick = function () {
                                        my("evaluate").style.display = "none";
                                        my("myInputApply").style.display = "none";
                                        my("historyApply").style.display = "none";
                                    }
                                    my("btn4").onclick = function () {
                                        document.getElementById("btn1").click();
                                        // $("#btn2").click();
                                        my("evaluate").style.display = "none";
                                        my("myInputApply").style.display = "block";
                                        my("historyApply").style.display = "none";
                                        // window.location.href="#myInputApply";

                                        // document.getElementById("#myInputApply").onclick;
                                    }
                                    my("btn5").onclick = function () {
                                        my("evaluate").style.display = "none";
                                        my("myInputApply").style.display = "none";
                                        my("historyApply").style.display = "none";
                                    }
                                    my("btn6").onclick = function () {
                                        my("evaluate").style.display = "none";
                                        my("myInputApply").style.display = "none";
                                        my("historyApply").style.display = "none";
                                    }
                                    my("btn7").onclick = function () {
                                        my("evaluate").style.display = "none";
                                        my("myInputApply").style.display = "none";
                                        my("historyApply").style.display = "none";
                                    }
                                    my("btnHistory").onclick = function () {
                                        my("evaluate").style.display = "none";
                                        my("myInputApply").style.display = "none";
                                        my("historyApply").style.display = "block";
                                    }
                                    my("btn8").onclick = function () {
                                        my("evaluate").style.display = "none";
                                        my("myInputApply").style.display = "none";
                                        my("historyApply").style.display = "none";
                                    }

                                    // var clickNum = 1;
                                    var clickNum=0;
                                    //公告栏的ajax
                                    // my("page").onclick = function () {
                                    $("#page").click(function(){
                                        UserShowInfodown();

                                    });

                                    //当按钮按下时执行此函数，不断增加新的消息
                                    function UserShowInfodown(){
                                        clickNum++;
                                        console.log(clickNum);
                                        $.ajax({
                                            type: "post",
                                            url: "/showInfo?clickNum=" + clickNum,
                                            // data:{clickNum:clickNum},
                                            dataType: "json",

                                            success: function (data) {
                                                var sli = "";

                                                for (var p in data) {
                                                    var title = data[p].title;
                                                    var content = data[p].content;
                                                    var state = data[p].state;
                                                    var id = data[p].id;
                                                    //创建一个li元素
                                                    // sli = "<li>"+title+" "+content+"</li>";
                                                    var redStar = "";
                                                    if (state == "unchecked") {
                                                        redStar = "<span id=\"NoticeUncheckedStyle" + id + "\" style=\"color: red\">(未读)</span>";
                                                    } else {
                                                        redStar = "<span id=\"NoticeUncheckedStyle" + id + "\" style=\"color: wheat\">(已读)</span>";
                                                    }

                                                    // sli="<div class=\"card\">\n" +
                                                    //     "      <h6 id=\"Notice\" style=\"text-align: left\"><span data-toggle=\"collapse\" data-target=\"#i"+id+"\">\n" +
                                                    //     "          "+title+"\n" +
                                                    //     "      </span>\n" +
                                                    //     "      "+redStar+"\n" +
                                                    //     "      </h6>\n" +
                                                    //     "      <div id=\"i"+id+"\" class=\"collapse\" data-parent=\"#checkoutaccordion\">\n" +
                                                    //     "          <div class=\"card-body\">\n" +
                                                    //     "             "+content+"\n" +
                                                    //     "          </div>\n" +
                                                    //     "      </div>\n" +
                                                    //     "  </div>";
                                                    sli = "<div class=\"card\">\n" +
                                                        "      <h6 id=\"Notice\" style=\"text-align: left\">" + "<button onclick=\"transferColor(this)\" name=\"" + id + "\" data-toggle=\"collapse\" data-target=\"#i" + id + "\">" +
                                                        "          " + title + "\n" +
                                                        "      </button>\n" +
                                                        "      " + redStar + "\n" +
                                                        "      </h6>\n" +
                                                        "      <div id=\"i" + id + "\" class=\"collapse\" data-parent=\"#checkoutaccordion\">\n" +
                                                        "          <div class=\"card-body\">\n" +
                                                        "             " + content + "\n" +
                                                        "          </div>\n" +
                                                        "      </div>\n" +
                                                        "  </div>";


                                                    //添加到ul中
                                                    $("#Notice2").append(sli);
                                                }


                                                // $("#Notice2").append(sli);
                                                //当查询结果数量少于每页固定数量，加载更多功能隐藏，并提示用户没有更多数据
                                                if (data.length < 4) {
                                                    $("#page").hide();
                                                    $("#info").show();
                                                }

                                            },
                                            error: function () {
                                                alert("failed");
                                            }
                                        })

                                    }

                                    //当页面打开时执行此函数，自动增加新的消息
                                    function UserShowInfostill(){
                                        clickNum=0;
                                        $.ajax({
                                            type: "post",
                                            url: "/showInfo?clickNum=" + clickNum,
                                            // data:{clickNum:clickNum},
                                            dataType: "json",

                                            success: function (data) {
                                                var sli = "";
                                                $("#Notice2").empty();
                                                for (var p in data) {
                                                    var title = data[p].title;
                                                    var content = data[p].content;
                                                    var state = data[p].state;
                                                    var id = data[p].id;
                                                    //创建一个li元素
                                                    // sli = "<li>"+title+" "+content+"</li>";
                                                    var redStar = "";
                                                    if (state == "unchecked") {
                                                        redStar = "<span id=\"NoticeUncheckedStyle" + id + "\" style=\"color: red\">(未读)</span>";
                                                    } else {
                                                        redStar = "<span id=\"NoticeUncheckedStyle" + id + "\" style=\"color: wheat\">(已读)</span>";
                                                    }

                                                    // sli="<div class=\"card\">\n" +
                                                    //     "      <h6 id=\"Notice\" style=\"text-align: left\"><span data-toggle=\"collapse\" data-target=\"#i"+id+"\">\n" +
                                                    //     "          "+title+"\n" +
                                                    //     "      </span>\n" +
                                                    //     "      "+redStar+"\n" +
                                                    //     "      </h6>\n" +
                                                    //     "      <div id=\"i"+id+"\" class=\"collapse\" data-parent=\"#checkoutaccordion\">\n" +
                                                    //     "          <div class=\"card-body\">\n" +
                                                    //     "             "+content+"\n" +
                                                    //     "          </div>\n" +
                                                    //     "      </div>\n" +
                                                    //     "  </div>";
                                                    sli = "<div class=\"card\">\n" +
                                                        "      <h6 id=\"Notice\" style=\"text-align: left\">" + "<button onclick=\"transferColor(this)\" name=\"" + id + "\" data-toggle=\"collapse\" data-target=\"#i" + id + "\">" +
                                                        "          " + title + "\n" +
                                                        "      </button>\n" +
                                                        "      " + redStar + "\n" +
                                                        "      </h6>\n" +
                                                        "      <div id=\"i" + id + "\" class=\"collapse\" data-parent=\"#checkoutaccordion\">\n" +
                                                        "          <div class=\"card-body\">\n" +
                                                        "             " + content + "\n" +
                                                        "          </div>\n" +
                                                        "      </div>\n" +
                                                        "  </div>";


                                                    //添加到ul中
                                                    $("#Notice2").append(sli);
                                                }


                                                // $("#Notice2").append(sli);
                                                //当查询结果数量少于每页固定数量，加载更多功能隐藏，并提示用户没有更多数据
                                                if (data.length < 4) {
                                                    $("#page").hide();
                                                    $("#info").show();
                                                }

                                            },
                                            error: function () {
                                                alert(clickNum+"读取信息失败！");
                                            }
                                        })

                                    }


                                </script>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 用户信息以及功能展示结束 -->
</main>


<!-- footer area start -->
<footer class="black-bg">
    <div class="footer-middle-area">
        <div class="container">
            <div class="row mtn-30">
                <div class="col-lg-6 col-sm-12">
                    <div class="address-block mt-30">
                        <div class="footer-logo">
                            <a href="/">
                                <img src="img/2.jpg" alt="Brand Logo">
                            </a>
                        </div>
                        <address class="address-info d-flex align-items-center">
                            <i class="fa fa-map-marker"></i>
                            <p><span>ADDRESS : </span> 梦翔大厦</p>
                        </address>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <address class="address-info email mt-30">
                        <i class="fa fa-envelope"></i>
                        <p><span>EMAIL : </span><a href="#">xxxx@qq.com</a></p>
                    </address>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <address class="address-info email mt-30">
                        <i class="fa fa-phone"></i>
                        <p><span>PHONE : </span><a href="#">158xxxxx9442</a></p>
                    </address>
                </div>
            </div>
        </div>
    </div>
    <div class="footer-bottom-area text-center">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="payment-method-list">

                    </div>

                    <p class="copyright">
                        Copyright © www.xxx.com
                    </p>
                </div>
            </div>
        </div>
    </div>
</footer>
<!-- footer area end -->

<!-- JS
============================================ -->

<!-- Modernizer JS -->
<script src="js/modernizr-3.6.0min.js"></script>
<!-- jQuery JS -->
<script src="js/jquery-3.3.1min.js"></script>
<!-- Popper JS -->
<script src="js/poppermin.js"></script>
<!-- Bootstrap JS -->
<script src="js/bootstrapmin.js"></script>
<!-- slick Slider JS -->
<script src="js/slickmin.js"></script>
<!-- Countdown JS -->
<script src="js/countdownmin.js"></script>
<!-- Nice Select JS -->
<script src="js/nice-selectmin.js"></script>
<!-- jquery UI JS -->
<script src="js/jqueryuimin.js"></script>
<!-- Image zoom JS -->
<script src="js/image-zoommin.js"></script>
<!-- image loaded js -->
<script src="js/imagesloadedpkgdmin.js"></script>
<!-- masonry  -->
<script src="js/masonrypkgdmin.js"></script>
<!-- mailchimp active js -->
<script src="js/ajaxchimp.js"></script>
<!-- contact form dynamic js -->
<script src="js/ajax-mail.js"></script>
<!-- google map api -->
<script src="http://ditu.google.cn/maps/api/js?key=AIzaSyCfmCVTjRI007pC1Yk2o2d_EhgkjTsFVN8"></script>
<!-- google map active js -->
<script src="js/google-map.js"></script>
<!-- Main JS -->
<script src="js/main.js"></script>

<script src="js/jquery.js"></script>


</body>
</html>
